<template>
    <div class="splash" ref="refSplash" v-show="bShowSplash" n-loading>
        <div style="transform: translate(0, -50%); position: absolute; top: 50%;width: 100%;">
            <n-spin size="large"  />
            <div v-show="showType=='html'" class="splash-html" v-html="htmlMsg"></div>
            <div v-show="showType=='text'" class="splash-text">{{msg}}</div>
        </div>
    </div>
</template>

<style scoped>
.splash .splash-text {
    margin-top: 20px ;
}
.splash .splash-html {
    margin-top: 20px ; 
}
.splash{
    z-index: 1000;
    width: 100% ;
    height: 100% ;
    position: absolute;
    background-color: white ;
    opacity: 0.9 ;
    text-align: center;
}
</style>

<script lang="ts" setup>
import { ref, onMounted, Ref, getCurrentInstance } from 'vue'
import { bus } from '@beshell/events-ts/bus';

const bShowSplash = ref(false)
const refSplash = ref(null) as unknown as Ref<HTMLElement>

const showType = ref("text")
const msg = ref("")
const htmlMsg = ref("")

/* @ts-ignore */
// const scopeId = getCurrentInstance()?.type.__scopeId 

onMounted (()=>{

    // console.log("getCurrentInstance()",getCurrentInstance())

    // let $el: any = $(refSplash.value)
    // let $message = $(`<div class="splash-text" ${scopeId}></div>`).appendTo($el.find(".el-loading-spinner"))

    bus.on("spin-fullpage.show()", (_msg='', isHtml=false)=>{
        if(isHtml) {
            htmlMsg.value = _msg
            msg.value = ''
            showType.value = 'html'
        }
        else {
            msg.value = _msg || ""
            htmlMsg.value = ''
            showType.value = 'text'
        }
        bShowSplash.value=true
    })
    bus.on("spin-fullpage.hide()", ()=>{
        bShowSplash.value=false
    })
    bus.on("spin-fullpage.message()", (_msg: string, isHtml=false)=>{
        if(isHtml) {
            htmlMsg.value = _msg
            msg.value = ''
            showType.value = 'html'
        }
        else {
            msg.value = _msg || ""
            htmlMsg.value = ''
            showType.value = 'text'
        }
    })
})
</script>